<template>
	<view>
		<view class="u-margin-top-30" v-for="item in listData" :key="item.id">
			<u-card margin=" 0" :show-head="false">
				<view slot="body">
					<view class="u-flex u-row-between">
						<view class="u-line-1 u-flex-1">
							{{$t("任务编号")}}:{{item.id}}
						</view>
						<view class="status" :class="item.status === '3' && 'success'">
							<!-- 	status: '0', // 0 待报价 1 待付款 2 进行中 3 已完成 （待定) -->
							<template v-if="item.status === '0'">{{$t("待报价")}}</template>
							<template v-if="item.status === '1'">{{$t("待付款")}}</template>
							<template v-if="item.status === '2'">{{$t("进行中")}}</template>
							<template v-if="item.status === '3'">{{$t("已完成")}}</template>
						</view>
					</view>
					<u-button type="primary" :custom-style="item.type === '1' ? btnStatusBfStyle : btnStatusQtStyle"
						hover-class="none">
						{{item.type === '1' ? $t("批量拜访") : $t("商务洽谈")}}
					</u-button>
					<view class="u-flex">
						<view>
							<view>{{$t("预估费用")}}</view>
							<view class="number">
								<text>￥</text>
								{{item.money}}
							</view>
						</view>
						<u-line length="60" class="u-margin-left-40 u-margin-right-40 u-flex-0" direction="col"
							color="#cccccc"></u-line>
						<view>
							<view>{{$t("费用报价")}}</view>
							<view class="number" v-if="item.relMoney">
								<text>￥</text>
								{{item.relMoney }}
							</view>
							<view v-else class="number">
								-
							</view>
						</view>
					</view>

					<view class="u-flex u-row-between u-col-bottom">
						<view>
							<view class="createTime u-line-1">
								{{$t("下单时间")}}：{{item.createTime}}
							</view>
							<view class="createTime u-line-1" v-if="item.payTime">
								{{$t("付款时间")}}：{{item.payTime}}
							</view>
						</view>
						<view class="u-flex">
							<u-button type="primary" :custom-style="customStyle" hover-class="none"
								v-if="item.status === '1'" @click="pay(item)">
								{{$t("立即付款")}}
							</u-button>
							<u-button type="primary" class="u-margin-left-20" :custom-style="customStyle1" hover-class="none"
								@click="info(item)">
								{{$t("查看详情")}}
							</u-button>
							<u-button class="u-margin-left-20" type="primary" :custom-style="customStyle2" hover-class="none"
								v-if="item.status === '3'" @click="info(item)">
								{{$t("查看回执")}}
							</u-button>

						</view>
					</view>
				</view>
			</u-card>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			listData: {
				type: Array,
				default: [],
				required: true,
			},
		},
		data() {
			return {
				customStyle: {
					background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
					'border-radius': '35rpx',
					'width': '150rpx',
					'font-size': '26rpx',
					height: '60rpx',
				},
				customStyle1: {
					background: 'transparent',
					'border-radius': '35rpx',
					border: '1rpx solid #ff4a17',
					color: '#ff4a17',
					'width': '150rpx',
					'font-size': '26rpx',
					height: '60rpx',
				},
				customStyle2: {
					background: '#45de3d',
					'border-radius': '35rpx',
					'width': '150rpx',
					'font-size': '26rpx',
					height: '60rpx',
				},
				btnStatusBfStyle: {
					background: '#ffeee7',
					'border-radius': '5rpx',
					'width': '180rpx',
					'font-size': '24rpx',
					height: '48rpx',
					margin: '20rpx 0',
					color: '#ff7348'
				},
				btnStatusQtStyle: {
					background: '#ffe7e7',
					'border-radius': '5rpx',
					'width': '180rpx',
					'font-size': '24rpx',
					height: '48rpx',
					margin: '20rpx 0',
					color: '#ff4848'
				},
			};
		},
		methods: {
			//跳转详情
			info(row) {
				this.$u.route({
					url: 'pages/teleSales/taskInfo/taskInfo',
					params: {
						id: row.id
					}
				})
			},
			//支付
			pay(row) {
				console.log(row);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.status {
		color: #ff4a17;
		font-size: 24rpx;

		&.success {
			color: #45de3d;
		}
	}

	.createTime {
		font-size: 22rpx;
		color: #999999;
	}

	.number {
		color: #ff4a17;
		font-size: 44rpx;
		margin-top: 10rpx;

		text {
			font-size: 26rpx;
		}
	}
</style>